import React, {Component,Fragment} from 'react';
import  style from "./Play.module.css";
import { Slider, Switch,Progress } from 'antd';
import Fetch from "../Fetch";
import "./Play.css"
import {DownOutlined,ShareAltOutlined} from "@ant-design/icons";
class Play extends Component {
    constructor(props) {
        super(props);

        // console.log(this.props.location.state.tracks[this.props.location.state.index].ar)
        this.state={
            disabled: false,
            tracks:this.props.location.state.tracks && this.props.location.state.tracks,
            id:this.props.location.state.id && this.props.location.state.id,
            idArray:this.props.location.state.idArray && this.props.location.state.idArray,
            idindex:this.props.location.state.index && this.props.location.state.index,
            // ar:this.props.location.state.tracks[this.props.location.state.index].ar,
            music:[],//音乐
            bofang:"",//播放暂停
            default:0,//滚动条百分比
            tiao:'paused',
            Time:0,//播放时间
            Time2:0,//播放总时间
            lyric:[],
            lyricShow:false,//歌词显隐
            gecitime:"00:00",
            geciindex:0,//歌词下标
            geciTop:200,
        }
    }
    render() {

        return (
            <div className={style.root}>
             <div className={style.top}>
                 <span>
                        <DownOutlined  />
                 </span>

                 <div>
                     <h3>{this.state.tracks[this.state.idindex].name}</h3>
                     <p>{this.state.tracks[this.state.idindex].author.map((name,j)=>{
                         if (j==this.state.tracks[this.state.idindex].author.length-1){
                             return name.name
                         }else {
                             return name.name+'/'
                         }

                     })}></p>
                 </div>
                 <span>
                      <ShareAltOutlined />
                 </span>

             </div>
                <div className={style.point}>

                </div>
                <img src="https://leonardo-zyh.github.io/163-music-demo/src/img/needle-ip6.png" alt="" className={style.stopper1} style={{"transform":"rotateZ("+this.state.degnum+")"}}/>


                <div className={style.content} onClick={this.gecishow.bind(this)}>
                        <img  style={{animationPlayState:`${this.state.tiao}`}} src={this.state.tracks[this.state.idindex].picUrl} alt=""/>
                    </div>
                <div className={style.iconRoot}>
                    <svg t="1607082048994" className={style.icon}viewBox="0 0 1169 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="12090" width="200" height="200">
                        <path
                            d="M1066.667 102.4C930.133-25.6 725.333-34.133 588.8 93.867 443.733-34.133 238.933-25.6 102.4 102.4c-136.533 136.533-136.533 349.867 0 486.4l401.067 401.067c42.666 42.666 110.933 42.666 153.6 0L1058.133 588.8c145.067-128 145.067-349.867 8.534-486.4z m-51.2 435.2L614.4 938.667c-17.067 17.066-34.133 17.066-51.2 0L153.6 537.6c-110.933-102.4-110.933-281.6 0-384 102.4-102.4 273.067-102.4 384-8.533l51.2 42.666 51.2-42.666c110.933-102.4 273.067-93.867 384 8.533 93.867 110.933 93.867 281.6-8.533 384z"
                            fill="#ffffff" p-id="12091"></path>
                    </svg>
                    <svg t="1607082131826" className={style.icon} viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="14753" width="200" height="200">
                        <path
                            d="M512.064 63.488c-247.232 0-448.448 201.28-448.448 448.576s201.216 448.448 448.448 448.448c247.168 0 448.32-201.152 448.32-448.448C960.512 264.768 759.232 63.488 512.064 63.488zM512.064 917.504c-223.616 0-405.568-182.016-405.568-405.568 0-223.488 181.952-405.44 405.568-405.44 223.808 0 405.44 181.952 405.44 405.44C917.504 735.488 735.616 917.504 512.064 917.504z"
                            p-id="14754" fill="#ffffff"></path>
                        <path
                            d="M489.856 636.608 489.856 333.312c0-12.544 10.176-22.592 22.656-22.592 12.416 0 22.656 10.048 22.656 22.592l0 302.016 152.448-152.192c8.896-8.768 23.232-8.768 32.128 0 8.896 8.896 8.896 23.168 0 31.936 0 0-192.128 192.128-192.384 192.448-3.648 3.264-8.384 5.312-13.568 5.76-0.96 0-1.664 0-2.624 0-5.248-0.448-9.984-2.368-13.632-5.76C497.344 707.2 304.128 515.264 304.128 515.264c-8.832-8.896-8.832-23.168 0-31.872 8.832-8.832 23.232-8.832 32 0L489.856 636.608z"
                            p-id="14755" fill="#ffffff"></path>
                    </svg>
                    <svg t="1607084804458"  className={style.icon}viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="23436" width="200" height="200">
                        <path
                            d="M614.84 89.599c85.46-42.521 191.999-23.278 256.64 52.699 62.14 73.011 66.346 175.864 17.175 252.606-12.245 0.043-25.069-2.053-38.196-5.972-52.092-15.542-106.511-58.221-150.317-110.832-43.937-52.727-76.121-114.288-83.697-167.478-1.026-7.244-1.575-14.27-1.605-21.023zM183.277 673.503c-0.65 37.807 18.39 58.627 54.853 64.452l401.174-269.607c-55.417-35.016-102.607-92.76-127.041-153.483L183.277 673.503z m13.099 85.561c-33.353 34.785-43.416 70.844-35.552 97.735 3.21 11.001 9.616 20.502 18.766 27.571 9.687 7.488 22.743 12.42 38.674 13.792 54.361 4.671 135.657-30.433 230.659-136.886C544.402 654.29 630.44 603.529 700.922 591.152c42.649-7.475 80.095-1.257 111.194 15.08 31.084 16.337 55.171 42.664 71.234 75.383 25.069 51.093 30.245 118.177 11.189 186.245l-55.763-15.644c15.181-54.245 11.653-106.495-7.345-145.199-10.67-21.745-26.342-39.05-46.293-49.547-19.967-10.497-44.892-14.328-74.226-9.18-58.727 10.294-132.866 55.373-218.688 151.532-109.184 122.34-208.898 162.143-278.716 156.157-27.469-2.357-50.919-11.61-69.295-25.821-18.94-14.646-32.255-34.396-38.935-57.253-13.287-45.442 0.289-102.78 49.372-153.96l41.726 40.119z m660.039-326.86C791.529 410.72 726.7 360.119 675.794 298.991c-46.351-55.648-82.018-120.955-96.419-181.749-38.096 46.901-53.58 106.986-45.195 164.703 23.306 70.047 83.783 142.568 151.184 173.536 56.502 16.353 118.888 9.021 171.051-23.277z"
                            p-id="23437" fill="#ffffff"></path>
                    </svg>
                    <svg t="1607082380158" className={style.icon} viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="21922" width="200" height="200">
                        <path
                            d="M512 184a328 328 0 0 1 0 656H205.44a21.44 21.44 0 0 1-21.44-21.44V512A328.48 328.48 0 0 1 512 184m0-48A376 376 0 0 0 136 512v306.56a69.44 69.44 0 0 0 69.44 69.44H512A376 376 0 0 0 888 512 376 376 0 0 0 512 136z"
                            p-id="21923" fill="#ffffff"></path>
                        <path
                            d="M616 432h-240a24 24 0 0 0 0 48h240a24 24 0 0 0 0-48zM552 576h-176a24 24 0 0 0 0 48h176a24 24 0 0 0 0-48z"
                            p-id="21924" fill="#ffffff"></path>
                    </svg>
                </div>
                <audio ref={"audio"} src={this.state.music.url} controls="controls" style={{width:"0px" ,height:"0px"}}  />
{/*                进度条*/}
<div className={style.jindu}>
      <span>{this.getMin(this.state.Time)}</span>
    <div className={style.default}>
        <div className={style.defaultTiao}>
            <div ref={"Qiu"} className={style.defaultTiaoQui} style={{left:`${this.state.default}%`}} onMouseDown={this.XiaoQuiMove.bind(this)}> </div>
            <div className={style.defaultTiaoTiao} style={{width:`${this.state.default}%`}}> </div>
        </div>
    </div>


<span>{this.getMin(this.state.Time2)}</span>

</div>

                {/*底部按钮*/}
                <div className={style.bottomlogo}>
                    <svg t="1607083796761" className={style.iicon} viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="9092" width="20" height="20">
                        <path
                            d="M753.564731 337.471035c-45.8697 0-160.259984 113.849978-243.789399 194.548928C383.134027 654.383848 263.508509 773.284865 167.764911 773.284865l-58.892295 0c-24.068162 0-43.581588-19.526729-43.581588-43.581588s19.513426-43.581588 43.581588-43.581588l58.892295 0c60.504002 0 183.002964-121.68134 281.432741-216.784348 119.79641-115.744117 223.254713-219.029482 304.368102-219.029482l56.209186 0-59.641355-57.828057c-17.033955-16.993023-17.060561-42.902112-0.057305-59.927881 17.002232-17.030885 44.596707-17.064654 61.631686-0.065492l134.207631 133.874033c8.192589 8.172123 12.794397 19.238157 12.794397 30.803563 0 11.564383-4.601808 22.604834-12.794397 30.776957L811.706943 461.72599c-8.505721 8.486278-19.646456 12.522198-30.78719 12.522198-11.166317 0-22.333658-4.676509-30.844495-13.199627-17.003256-17.025769-16.975627-45.432749 0.057305-62.425771l59.641355-61.151755L753.564731 337.471035zM811.706943 561.66105c-17.034978-16.999163-44.629453-16.972557-61.631686 0.058328-17.003256 17.024745-16.975627 46.257533 0.057305 63.250556l59.641355 61.150732-56.209186 0c-35.793204 0-95.590102-52.946886-154.87637-108.373243-17.576307-16.435321-45.161572-16.3422-61.594847 1.226944-16.444531 17.568121-15.523555 46.393633 2.053776 62.823837 90.322122 84.458577 151.246703 131.484613 214.417441 131.484613l56.209186 0-59.641355 57.824987c-17.033955 16.993023-17.060561 43.736107-0.057305 60.761875 8.511861 8.523117 19.678178 12.369725 30.844495 12.369725 11.140735 0 22.281469-4.453429 30.78719-12.939707L945.914574 757.311055c8.192589-8.173147 12.794397-19.315928 12.794397-30.881334 0-11.564383-4.601808-22.682605-12.794397-30.855752L811.706943 561.66105zM108.871593 337.471035l58.892295 0c45.932122 0 114.40154 58.455343 168.915108 107.942431 8.352225 7.576559 18.832927 12.140505 29.29214 12.140505 11.852956 0 23.673166-4.394077 32.270984-13.857613 16.182564-17.807574 14.859429-46.823422-2.958378-62.998823-85.247546-77.381391-156.561755-130.388652-227.519854-130.388652l-58.892295 0c-24.068162 0-43.581588 19.526729-43.581588 43.581588S84.804455 337.471035 108.871593 337.471035z"
                            p-id="9093" fill="#ffffff"></path>
                    </svg>
                    <svg t="1607152980937" className={style.iicon} onClick={this.shang.bind(this)}  viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="9596" width="20" height="20">
                        <path
                            d="M803.584 134.592c-18.176-10.048-39.936-10.112-58.112 0L192 443.008l0-282.88c0-17.664-14.336-32-32-32S128 142.464 128 160.128l0 344.896C127.744 507.2 127.104 509.248 127.104 511.488S127.744 515.84 128 518.016l0 346.112c0 17.664 14.336 32 32 32s32-14.336 32-32L192 579.968l553.408 308.352C754.56 893.44 764.48 896 774.528 896s19.968-2.56 29.056-7.616c18.176-10.112 28.992-28.224 28.992-48.576L832.576 183.104C832.576 162.88 821.76 144.768 803.584 134.592zM768.192 829.248 198.016 511.488 771.328 192 768.192 829.248z"
                            p-id="9597" fill="#ffffff"></path>
                    </svg>

                    {/*暂停*/}
                    <svg t="1607082808278" className={style.iicon} viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="6890" width="20" height="20" style={{display:this.state.bofang=="播放" ? "none" :"block"}}onClick={this.bo.bind(this)}>
                        <path
                            d="M500.864 83.392c239.68 0 434.656 194.976 434.656 434.624 0 239.648-195.008 434.656-434.656 434.656S66.24 757.664 66.24 518.016 261.216 83.392 500.864 83.392m0 933.28c274.944 0 498.656-223.712 498.656-498.656S775.84 19.392 500.864 19.392C225.92 19.392 2.24 243.072 2.24 518.016S225.92 1016.672 500.864 1016.672"
                            p-id="6891" fill="#ffffff"></path>
                        <path
                            d="M436.864 412.512l189.024 105.504-189.024 105.504v-211.008z m-32 297.504a31.04 31.04 0 0 0 15.36-4.48l0.224 0.416 286.72-160-0.256-0.416a31.584 31.584 0 0 0 16.64-27.52 31.552 31.552 0 0 0-16.64-27.52l0.224-0.416-286.688-160-0.224 0.416a30.72 30.72 0 0 0-15.36-4.48 32 32 0 0 0-32 32v320a32 32 0 0 0 32 32z"
                            p-id="6892" fill="#ffffff"></path>
                    </svg>
                    {/*播放*/}
                    <svg t="1607148688150" className={style.iicon} viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3751" width="20" height="20" style={{display:this.state.bofang=="播放" ? "block" :"none"}} onClick={this.bo.bind(this)}>
                        <path
                            d="M500.864 952.64c-239.648 0-434.656-194.976-434.656-434.624 0-239.68 195.008-434.624 434.656-434.624 239.68 0 434.656 194.944 434.656 434.624 0 239.68-195.008 434.624-434.656 434.624m0-933.28C225.92 19.36 2.24 243.104 2.24 518.016 2.24 792.96 225.92 1016.64 500.864 1016.64s498.656-223.68 498.656-498.624c0-274.912-223.68-498.624-498.656-498.624"
                            p-id="3752" fill="#ffffff"></path>
                        <path
                            d="M404.864 326.016a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0v-320a32 32 0 0 0-32-32M596.864 326.016a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0v-320a32 32 0 0 0-32-32"
                            p-id="3753" fill="#ffffff"></path>
                    </svg>
                    <svg t="1607082841036" className={style.iicon} viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="7671" width="20" height="20" onClick={this.xia.bind(this)}>
                        <path
                            d="M832 160.128c0-17.664-14.336-32-32-32S768 142.464 768 160.128l0 282.88L214.592 134.592c-18.176-10.112-39.936-10.048-58.112 0C138.24 144.768 127.424 162.88 127.424 183.168l0 656.64c0 20.224 10.816 38.464 29.056 48.576C165.568 893.44 175.488 896 185.472 896s19.968-2.56 29.056-7.616L768 579.968l0 284.096c0 17.664 14.336 32 32 32s32-14.336 32-32L832 160.128zM191.808 829.248 188.672 192l573.312 319.488L191.808 829.248z"
                            p-id="7672" fill="#ffffff"></path>
                    </svg>
                    <svg t="1607082875816" className={style.iicon} viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="8575" width="20" height="20">
                        <path
                            d="M822.4 835.2h-620.8c-12.8 0-25.6-12.8-25.6-25.6s12.8-25.6 25.6-25.6h620.8c12.8 0 25.6 12.8 25.6 25.6s-12.8 25.6-25.6 25.6z m0-294.4h-620.8c-12.8 0-25.6-12.8-25.6-25.6s12.8-25.6 25.6-25.6h620.8c12.8 0 25.6 12.8 25.6 25.6s-12.8 25.6-25.6 25.6z m-537.6-300.8h-83.2c-12.8 0-25.6-12.8-25.6-25.6s12.8-25.6 25.6-25.6h83.2c19.2 0 25.6 12.8 25.6 25.6s-6.4 25.6-25.6 25.6z m537.6 0h-441.6c-12.8 0-25.6-12.8-25.6-25.6s12.8-25.6 25.6-25.6h435.2c12.8 0 25.6 12.8 25.6 25.6s-6.4 25.6-19.2 25.6z"
                            fill="#ffffff" p-id="8576"></path>
                    </svg>
                </div>
                {/*歌词*/}
                <div className={style.lyric} style={{display:this.state.lyricShow ? "block":"none"}} onClick={this.gecishow.bind(this)}>
                    <ul ref={"luriceUl"} style={{top:this.state.geciTop+'px'}}>
                        {
                            this.state.lyric.map((v,i)=>{
                                return <li  key={i} style={{'color': i == this.state.geciindex? "white" :"gainsboro"}}>
                                     {v.slice(11)}
                                </li>
                            })
                        }
                    </ul>

                </div>
            </div>
        );
    }
    handleDisabledChange (){
        this.setState({disabled:true});
    };
    bo(){
    console.log(this.refs.audio)
        let audio=this.refs.audio;
        console.log(audio.duration)
        // audio.currentTime=180;
        if (audio.paused){
            this.setState((state,props)=>{
               return{
                   bofang:"播放",
                   tiao:'running',

               }
            })
            audio.play();
        }else {
            this.setState((state,props)=>{
                return{
                    bofang:"",
                    tiao:'paused',

                }
            })
            audio.pause();
        }
     let hh=this;
        audio.ontimeupdate = function () {
            let pre = Math.floor((audio.currentTime/audio.duration)*100)
          hh.setState((state,props)=>{
              // console.log(state.default)
              return{
                  default:pre,
                  Time:audio.currentTime,
                  Time2:audio.duration,
              }
          })
        //    歌词滚动
            hh.gun(hh.getMin(audio.currentTime));
        //    下一首
            if (audio.currentTime==audio.duration&&hh.state.idindex!=hh.state.idArray.length){
                hh.setState((state,props)=>{
                    return {
                        idindex:state.idindex+1,
                    }
                },()=>{
                    hh.componentDidMount()
                })
            }

        }
    }
    //拖动小球
    XiaoQuiMove(e){
        e.preventDefault();
        console.log(this.refs.Qiu)
        document.onmousemove=()=>{
            console.log("鼠标移动")
        }
    }
    onChange(num){
        this.setState({
            default:num,
        })
    }
    //上一首
    shang(){

        if (this.state.idindex>0){
        this.setState((state,props)=>{
            return {
                idindex:state.idindex-1,
            }
        },()=>{
            console.log(this.state.idindex,this.state.idArray.length)
            this.componentDidMount()
        })
        }
    }
    //下一首
    xia(){

        if (this.state.idindex+1<this.state.idArray.length) {
            this.setState((state, props) => {
                return {
                    idindex: state.idindex +1,
                }
            }, () => {
                console.log(this.state.idindex,this.state.idArray.length)
                this.componentDidMount()
            })
        }else {
            console.log("最后一首")
        }
    }
    //格式化时间
    getMin(time) {
        var m = Math.floor(time /60)
        var s = Math.floor(time% 60)
        if(m <= 9) {
            m = "0" + m
        }
        if(s <= 9) {
            s = "0" + s
        }
        return m + ":" + s
    }
    //歌词滚动
    gun(time){

        this.setState((state,props)=>{
            return {
                gecitime:time,
            }
        },()=>{
            this.state.lyric.forEach((item,index)=>{
                if (item.slice(1,6)==this.state.gecitime){
this.setState((state,props)=>{
    return{
        geciTop:state.geciTop-10,
        geciindex:index,

    }

})
                }
            })
        })

    }
    //歌词显隐
    gecishow(){
        console.log("点击了")
        this.setState((state,props)=>{
            return {
                lyricShow:!state.lyricShow,
            }
        })
    }

    componentDidMount() {
// console.log(this.state.idindex,this.props.location.state.idArray[this.state.idindex])
        let audio=this.refs.audio;//播放实例
Fetch.get(`http://localhost:3000/song/url?id=${this.props.location.state.idArray[this.state.idindex]}`).then(data=>{
    setTimeout(()=>{
        this.bo();
        this.setState((state,props)=>{
            return  {
                Time2:audio.duration,
            }
        },)

    },200)
    // console.log(this.refs.audio.duration);

    this.setState((state,props)=>{
        return  {
            music:data.data[0],

        }
    })

//    设置进度条时间
})
    //    歌词
        Fetch.get(`http://localhost:3000/lyric?id=${this.props.location.state.idArray[this.state.idindex]}`).then(data=>{
            // console.log(data.lrc.lyric.split('\n'))
            let Array=data.lrc.lyric.split('\n')
            Array.forEach((item,index)=>{
                if (item.length==11){
                    Array.splice(index,1)
                }
            })
            // console.log(Array)
            this.setState((stare,props)=>{
                return{
                    lyric:Array,
                }
            })
        })
    }
}

export default Play;